<template>
	<!-- 购物车 -->
	<view class="container p-bottom">
		<view class="flow-list" v-if="goodslist.length">
			<view class="cart-edit-wrap dis-flex flex-x-end">
				<text v-if="action == 'complete'" @tap="switchAction" class="f-30" data-action="edit">编辑</text>
				<text v-if="action == 'edit'" @tap="switchAction" class="f-30" data-action="complete">完成</text>
			</view>
			<view v-for="(item,index) in goodslist" :key="index">
				<view class="dish-item dis-flex flex-y-center" :data-index="index">
					<!-- 选择框 -->
					<view class="dish-item-radio" @tap="onChecked" :data-index="index">
						<label class="radio">
							<radio :checked="item.checked" color="#ff495e"></radio>
						</label>
					</view>
					<view class="dish-item-wrp dis-flex flex-box">
						<!-- 商品图片 -->
						<navigator hover-class="none" :url="'../goods/index?goods_id=' + item.goods_id">
							<view class="dish-item-pic">
								<image mode="aspectFill" class="image" :src="item.goods_image"></image>
							</view>
						</navigator>
						<!-- 商品信息 -->
						<view class="dish-item-info flex-box">
							<navigator hover-class="none" :url="'../goods/index?goods_id=' + item.goods_id">
								<view class="goods-name">
									<text class="twolist-hidden f-28 col-3">{{item.goods_name}}</text>
								</view>
								<view class="goods-attr dis-flex">
									<text class="col-7 f-24">{{item.goods_sku.goods_attr}}</text>
								</view>
							</navigator>
							<view class="dis-flex flex-x-between m-top20">
								<!-- 商品价格 -->
								<view class="wx-goods_price dis-flex flex-y-center">
									<text v-if="item.is_user_grade " class="dish-item-money">￥{{ item.grade_goods_price }}</text>
									<text v-else class="dish-item-money">￥{{ item.goods_price }}</text>
								</view>
							</view>
							<!-- 数量选择器 -->
							<view class="select-number">
								<button @tap="onSubCount" class="default" :class="item.total_num>1?'':' disabled'"  :data-index="index"
								 :data-sku-id="item.goods_sku_id" type="default">-</button>
								<input bindinput="import" disabled="true" type="number" :value="item.total_num"></input>
								<button @tap="onAddCount" class="default" :data-index="index" :data-sku-id="item.goods_sku_id" type="default">+</button>

							</view>
							<!-- 删除按钮 -->
							<!-- 							<view @tap="del" class="flow-dete" :data-goods-id="item.goods_id" :data-sku-id="item.goods_sku_id">
								<text class="iconfont icon-lajixiang"></text>
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<!-- 底部操作栏 -->
			<view class="cart-tab-wrp">
				<view class="cart-item-total cart-tab-item dis-flex flex-y-center">
					<view class="checked-all">
						<label @tap="onCheckedAll" class="radio dis-flex flex-y-center">
							<radio class="margin-right: 10rpx;" :checked="checkedAll" color="#ff495e"></radio>
							<text class="f-28">全选</text>
						</label>
					</view>
					<view v-if="action === 'complete'" class="cart-item-total-price dis-flex">
						<text class="f-28 col-m">合计：￥{{cartTotalPrice}}</text>
					</view>
				</view>
				<view class="cart-tab-item_1">
					<view v-if="action === 'complete'" @tap="submit" class="cart-tab-item-btn">去结算</view>
					<view v-if="action === 'edit'" @tap="onDelete" class="cart-tab-item-btn">删除</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="yoshop-notcont">
				<text class="iconfont icon-wushuju"></text>
				<text class="cont">亲，购物车还没有商品哦</text>
				<view @tap="goShopping" class="flow-btn-min">去购物</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	// 工具类
	import Util from '../../utils/util.js';
	export default {
		computed: {

		},
		data() {
			return {
				isLogin: false,
				goodslist: [], // 商品列表
				// 分类菜单
				// order_total_num: 0,
				// 当前动作
				action: 'complete',

				// 选择的商品
				checkedData: [],

				// 是否全选
				checkedAll: false,
				// 商品总金额
				order_total_price: 0,
				// 商品总价格
				cartTotalPrice: '0.00',
			}
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			// 获取购物车列表
			let _this = this;
			_this.setData({
				isLogin: _this.checkIsLogin()
			});
			if (_this.isLogin) {
				// 获取购物车列表
				_this.getCartList();
			}
		},
		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			// 获取首页数据
			uni.stopPullDownRefresh();
		},
		methods: {
			getCartList: function() {
				let _this = this;
				_this._get('cart/lists', {}, function(result) {
					_this._initGoodsChecked(result.data);
				});
			},
			/**
			 * 初始化商品选中状态
			 */
			_initGoodsChecked: function(data) {
				let _this = this;
				let checkedData = _this.getCheckedData();
				// 将商品设置选中
				data.goods_list.forEach(item => {
					item.checked = Util.inArray('${item.goods_id}_${item.goods_sku_id}', checkedData);
				});

				_this.setData({
					goodslist: data.goods_list,
					order_total_price: data.order_total_price,
					action: 'complete',
					checkedAll: checkedData.length == data.goods_list.length,
				});

				// 更新购物车已选商品总价格
				_this.updateTotalPrice();
			},
			/**
			 * 获取选中的商品
			 */
			getCheckedData() {
				let checkedData = uni.getStorageSync('checkedData');
				return checkedData ? checkedData : [];
			},

			/**
			 * 选择框选中
			 */
			onChecked: function(e) {
				let _this = this;
				let index = e.currentTarget.dataset.index;
				let goods = _this.goodslist[index];
				let checked = !goods.checked;
				// 选中状态
				this.$set(_this.goodslist[index], 'checked', checked);
				// 更新选中记录
				_this.onUpdateChecked();
				// 更新购物车已选商品总价格
				_this.updateTotalPrice();
				// 更新全选状态
				_this.setData({
					checkedAll: _this.getCheckedData().length == _this.goodslist.length
				});
			},

			/**
			 * 选择框全选
			 */
			onCheckedAll: function(e) {
				let _this = this;
				let goodsList = this.goodslist;
				goodsList.forEach(function(item) {
					item.checked = !_this.checkedAll;
				});

				_this.setData({
					goodslist: goodsList,
					checkedAll: !_this.checkedAll,
				});

				// 更新购物车已选商品总价格
				_this.updateTotalPrice();
				// 更新选中记录
				_this.onUpdateChecked();

			},

			/**
			 * 更新商品选中记录
			 */
			onUpdateChecked() {
				let _this = this,
					checkedData = [];
				_this.goodslist.forEach(item => {
					if (item.checked == true) {
						checkedData.push('${item.goods_id}_${item.goods_sku_id}');
					}
				});
				uni.setStorageSync('checkedData', checkedData);
			},
			/**
			 * 切换编辑/完成
			 */
			switchAction: function(e) {
				let _this = this;
				_this.setData({
					action: e.currentTarget.dataset.action
				});
			},

			/**
			 * 删除商品
			 */
			onDelete: function() {
				let _this = this;
				let cartIds = _this.getCheckedIds();
				if (!cartIds.length) {
					this.showError('您还没有选择商品');
					return false;
				}
				_this.showModal("您确定要移除选择的商品吗?",function(e) {
						_this._post_form('cart/delete', {
							goods_sku_id: cartIds
						}, function(result) {
							// 删除选中的商品
							_this.onDeleteEvent(cartIds);
							// 获取购物车列表
							_this.getCartList();
						});
					})
				// uni.showModal({
				// 	title: "提示",
				// 	cancelText:'确定',
				// 	content: "您确定要移除选择的商品吗?",
				// 	success: function(e) {
				// 		e.confirm && _this._post_form('cart/delete', {
				// 			goods_sku_id: cartIds
				// 		}, function(result) {
				// 			// 删除选中的商品
				// 			_this.onDeleteEvent(cartIds);
				// 			// 获取购物车列表
				// 			_this.getCartList();
				// 		});
				// 	}
				// });
			},
			/**
			 * 商品删除事件
			 */
			onDeleteEvent(cartIds) {
				let _this = this;
				cartIds.forEach((cartIndex) => {
					_this.goodslist.forEach((item, goodsIndex) => {
						if (cartIndex == '${item.goods_id}_${item.goods_sku_id}') {
							_this.goodslist.splice(goodsIndex, 1);
						}
					});
				});
				// 更新选中记录
				_this.onUpdateChecked();
				return true;
			},

			/**
			 * 获取已选中的商品
			 */
			getCheckedIds: function() {
				let arrIds = [];
				this.goodslist.forEach(function(item) {
					if (item.checked === true) {
						arrIds.push(item.goods_id + '_' + item.goods_sku_id);
					}
				});
				return arrIds;
			},

			/**
			 * 更新购物车已选商品总价格
			 */
			updateTotalPrice: function() {
				let _this = this;
				let cartTotalPrice = 0;

				// console.log(_this.goodslist);return false;
				_this.goodslist.forEach(function(item) {
					if (item.checked === true) {
						cartTotalPrice = _this.mathadd(cartTotalPrice, item.total_price);
					}
				});

				_this.setData({
					cartTotalPrice: Number(cartTotalPrice).toFixed(2),
				});
			},

			/**
			 * 递增指定的商品数量
			 */
			onAddCount: function(e) {
				let _this = this;
				let index = e.currentTarget.dataset.index;
				let goodsSkuId = e.currentTarget.dataset.skuId;
				let goodsdata = _this.goodslist[index];
				// order_total_price = _this.order_total_price;
				// 后端同步更新
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this._post_form('cart/add', {
					goods_id: goodsdata.goods_id,
					goods_num: 1,
					goods_sku_id: goodsSkuId
				}, function() {
					// 获取购物车列表
					_this.getCartList();
				}, null, function() {
					uni.hideLoading();
				});
			},

			/**
			 * 递减指定的商品数量
			 */
			onSubCount: function(e) {
				let _this = this;
				let index = e.currentTarget.dataset.index;
				let goodsSkuId = e.currentTarget.dataset.skuId;
				let goods = _this.goodslist[index];
				// order_total_price = _this.order_total_price;
				if (goods.total_num > 1) {
					// 后端同步更新
					uni.showLoading({
						title: '加载中',
						mask: true
					})

					this._post_form('cart/sub', {
						goods_id: goods.goods_id,
						goods_sku_id: goodsSkuId
					}, function() {
						// 获取购物车列表
						_this.getCartList();
					}, null, function() {
						uni.hideLoading();
					});

				}
			},

			/**
			 * 购物车结算
			 */
			submit: function() {
				let _this = this;
				let cartIds = _this.getCheckedIds();
				if (!cartIds.length) {
					this.showError('您还没有选择商品');
					return false;
				}
				uni.navigateTo({
					url: '../flow/checkout?order_type=cart&cart_ids=' + cartIds
				});
			},

			/**
			 * 加法
			 */
			mathadd: function(arg1, arg2) {
				return (Number(arg1) + Number(arg2)).toFixed(2);
			},

			/**
			 * 减法
			 */
			mathsub: function(arg1, arg2) {
				return (Number(arg1) - Number(arg2)).toFixed(2);
			},

			/**
			 * 去购物
			 */
			goShopping: function() {
				uni.switchTab({
					url: '../index/index',
				});
			},
		}

	}
</script>
<style>
	/* common.wxss */

	.image {
		width: 100%;
		height: 100%;
	}

	.cart-edit-wrap {
		padding: 15rpx;
	}

	.cart-tab-item-btn {
		width: 160rpx;
		display: block;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		background: linear-gradient(to right, #fa1e8c 0, #fc1e56 100%);
		color: #fff;
		float: right;
		text-align: center;
	}

	.cart-tab-item {
		width: 75%;
	}

	.cart-tab-item_1 {
		width: 25%;
	}

	.cart-tab-wrp {
		height: 100rpx;
		position: fixed;
		bottom: 1rpx;
		background: #fff;
		border-top: 1rpx solid #ddd;
		display: flex;
		flex-direction: row;
		width: 100%;
		z-index: 10;
		color: black;
	}

	.cart-tab-item {
		overflow: hidden;
		/* line-height: 100rpx; */
	}

	.cart-tab-item .cart-item-total-price {
		/* float: left; */
	}

	.cart-item-total {
		padding-left: 30rpx;
	}

	.cart-item-total-price {
		/* color: #ff495e; */
		/* text-align: center; */
		margin-left: 15rpx;
	}

	.cart-item-total-price em {
		display: block;
	}

	.cart-item-icon-wrp {
		width: 110rpx;
		height: 90rpx;
		position: absolute;
		top: -4rpx;
	}

	.cart-item-icon {
		width: 90rpx;
		height: 90rpx;
	}

	.dish-item {
		width: 100%;
		padding: 26rpx 20rpx;
		border-bottom: 1rpx solid #eee;
		position: relative;
		background: #fff;
		box-sizing: border-box;
	}

	.dish-item-radio {
		padding: 20rpx 0;
	}

	.dish-item-wrp {
		flex-direction: row;
	}

	.dish-item-pic {
		width: 100%;
		margin-left: 12rpx;
	}

	.dish-item-pic image {
		width: 180rpx;
		height: 180rpx;
		margin: 0 auto;
		background: #fff;
		border: 1rpx solid #eee;
	}

	.dish-item-info {
		padding-left: 16rpx;
		/* margin-right: 15px; */
		/* width: 68%; */
	}

	.dish-item-info .goods-name {
		height: 80rpx;
	}

	.dish-item-sales {
		color: #ccc;
		font-size: 20rpx;
		line-height: 50rpx;
	}

	.dish-item-money {
		color: #ff495e;
		font-size: 32rpx;
		float: left;
	}

	.wx-goods_price {
		overflow: hidden;
	}

	.flow-dete {
		position: absolute;
		bottom: 25rpx;
		right: 30rpx;
	}

	.flow-dete .icon-lajixiang {
		color: #777;
		font-size: 34rpx;
	}

	.flow-btn-min {
		background: #fff;
		border: 1rpx solid #ccc;
		height: 30px;
		line-height: 30px;
		font-size: 28rpx;
		width: 200rpx;
		margin: 0 auto;
		border-radius: 5px;
		text-align: center;
		color: #777;
		margin-top: 25rpx;
	}

	.select-number {
		width: 202rpx;
		height: 52rpx;
		flex-direction: row;
		border: 1rpx solid rgb(231, 231, 231);
		border-radius: 5rpx;
		margin-top: 20upx;
	}

	.select-number .default {
		float: left;
		width: 60rpx;
		height: 52rpx;
		line-height: 48rpx;
		padding: 0;
		background: #fff;
		color: #444;
		font-size: 40rpx;
		border-radius: unset;
	}

	.select-number .disabled {
		background: #f7f7f7;
		color: #ddd;
	}

	.select-number button:after {
		content: none;
		border: none;
	}

	.select-number input {
		float: left;
		width: 80rpx;
		height: 52rpx;
		line-height: 52rpx;
		border-right: 1rpx solid #eee;
		border-left: 1rpx solid #eee;
		text-align: center;
		font-size: 28rpx;
		color: #444;
	}
</style>
